page { background: #f6f8fb; }


/* 顶部导航 */
.header { position: sticky; top: 0; z-index: 10; }
.header-inner {
  height: 88rpx; display: flex; align-items: center; justify-content: center;
  position: relative; color: #111; font-weight: 600; font-size: 32rpx;
}
.back { position: absolute; left: 24rpx; font-size: 44rpx; line-height: 1; }
.slot { position: absolute; right: 24rpx; width: 120rpx; height: 1rpx; }

/* 对话区 */
.chat {
  position: relative; z-index: 1;
  height: calc(100vh - 88rpx - env(safe-area-inset-bottom) - 120rpx);
  padding: 24rpx 24rpx 140rpx;  /* 预留底部输入栏空间 */
  box-sizing: border-box;
}

.row { display: flex; margin: 16rpx 0; }
.row.left { justify-content: flex-start; }
.row.right { justify-content: flex-end; }

.avatar {
  width: 64rpx; height: 64rpx; border-radius: 50%;
  margin-right: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,.08);
}

.bubble {
  max-width: 560rpx; padding: 24rpx 28rpx; border-radius: 20rpx;
  font-size: 30rpx; line-height: 1.5;
  box-shadow: 0 8rpx 24rpx rgba(26,39,68,.08);
}
.bubble.left { background: #fff; color: #111; border-top-left-radius: 8rpx; }
.bubble.right { background: #0C88E8; color: #fff; border-top-right-radius: 8rpx; }

/* 选择器卡片 */
.picker-card {
  position: fixed; left: 24rpx; right: 24rpx; bottom: 140rpx;
  z-index: 5;
}
.picker-inner {
  background: #fff; border-radius: 24rpx;
  box-shadow: 0 12rpx 36rpx rgba(16,24,40,.12);
  padding: 24rpx;
}
.pv {
  width: 100%; height: 420rpx;
  background: #fff; border-radius: 20rpx;
}
.pv view { height: 80rpx; line-height: 80rpx; text-align: center; color: #9aa1ab; }
.pv .wx-picker-view-indicator { color: #111; font-weight: 700; }

.picker-actions {
  display: flex; justify-content: space-between; gap: 24rpx;
  margin-top: 24rpx;
}
.btn {
  flex: 1; height: 92rpx; border-radius: 999rpx;
  display: flex; align-items: center; justify-content: center;
  font-size: 30rpx;
}
.btn.ghost { color: #0C88E8; border: 2rpx solid #0C88E8; background: #fff; }
.btn.primary { color: #fff; background: #0C88E8; }

/* 底部输入栏 */
.input-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  padding: 12rpx 24rpx 12rpx;
  background: transparent;
}
.input {
  flex: 1; height: 92rpx; padding: 0 28rpx; margin-right: 16rpx;
  background: #fff; border-radius: 999rpx; font-size: 30rpx;
  box-shadow: 0 8rpx 24rpx rgba(26,39,68,.08);
}
.send {
  width: 92rpx; height: 92rpx; border-radius: 50%;
  background: #0C88E8; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 36rpx; box-shadow: 0 8rpx 24rpx rgba(26,39,68,.18);
}

/* 兼容较小设备：适当压缩对话区高度 */
@media (max-width: 360px) {
  .chat { height: calc(100vh - 88rpx - env(safe-area-inset-bottom) - 140rpx); }
}
